<template>
    <div class='container'>
        <el-cascader :options="treeList" :props="props" clearable @change="giveParent" ref="node" style="width: 500px"
            v-model="value" class="changecategory">
        </el-cascader>
    </div>
</template>

<script>
export default {

    name: 'changecategory',
    props: {
        value: Array
    },
    data() {
        return {
            props: {  //
                value: 'categoryId',
                label: 'name',
                children: 'childrenCategory',
                expandTrigger: 'hover'  // hover展开
            },
            treeList: [],
            categoryVo: {
                parentCid: 0,
                categoryId: 0,
                name: ''
            }
        };
    },

    methods: {
        // 获得树形分类数据
        getTreeList() {
            this.$http({
                url: this.$http.adornUrl("/shitou-product/shitouproduct/category/treeList"),
                method: 'get'
            }).then(({ data }) => {
                if (data.data.length > 20)
                    this.treeList = data.data.slice(0, 20)
                else this.treeList = data.data
            })
        },

        // 给父亲组件传递categoryId
        giveParent() {
            let nodeInfo = this.$refs["node"].getCheckedNodes()[0];
            this.categoryVo.parentCid = nodeInfo.parent.value
            this.categoryVo.categoryId = nodeInfo.value
            this.categoryVo.name = nodeInfo.label
            console.log(nodeInfo.value)
            this.$emit('categoryVo', this.categoryVo)
        },
    },

    created() {
        this.getTreeList()
    }
};
</script>
<style scoped></style>
